<template>
	<view class="content">
		<view class="top-info">
			<view class="user-info">
				<img class="user-avatar" :src="userInfo.avatar" />
				<view class="user-show-intro">
					<view class="user-name">{{ userInfo.name }} </view>
					<view class="show-tel">分享{{ shareNum }}个图稿给你</view>
				</view>
			</view>
			<view class="show-btn" @tap="onTap">
				<uni-badge
					class="uni-badge-left-margin"
					:text="num"
					absolute="rightTop"
					size="small"
					:is-dot="isDot"
				>
					<view class="box">
						<img src="./../../../static/common/cartNum.png" />
					</view>
				</uni-badge>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import { computed } from 'vue';

	const props = defineProps({
		num: {
			type: Number,
			default: 0,
		},
		shareNum: {
			type: Number,
			default: 0,
		},
		isDot: {
			type: Boolean,
			default: false,
		},
	});

	const userInfo = computed(() => JSON.parse(JSON.stringify(sheep.$store('user').userInfo)));

	// 右上角购物车点击事件
	const onTap = () => {
		if (!props.isDot) {
			sheep.$router.go('/pages/index/cart');
		}
	};
</script>

<style scoped lang="scss">
	.content {
		.top-info {
			display: flex;
			justify-content: space-around;
			.user-info {
				flex: 6;
				height: 120rpx;
				display: flex;
				align-items: center;
				.user-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 1rpx solid #ccc;
				}
				.user-show-intro {
					height: 88rpx;
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					.user-name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
					.show-tel {
						margin-top: 2rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
			.show-btn {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				.imgage {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
	// uni-badge的样式
	/* #ifdef MP-ALIPAY */
	.uni-badge {
		margin-left: 20rpx;
	}

	/* #endif */
	.example-body {
		flex-direction: row;
		justify-content: flex-start;
	}

	.uni-badge-left-margin {
		margin-left: 10rpx;
	}

	.uni-badge-absolute {
		margin-left: 40rpx;
	}
	.box {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #fff;
		font-size: 12rpx;
		img {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.box-text {
		text-align: center;
		color: #fff;
		font-size: 12rpx;
	}
	:deep(.uni-badge) {
		right: -8px !important;
		top: -8px !important;
	}
</style>
